/**
 * useReducer 练习
 */

import { useReducer } from "react";
import switchReducer from "./switchReducer.tsx";

interface State {
  isActive: boolean;
}
//默认值
const initialState: State = { isActive: false };

const ToggleStyleButton = () => {
  const [state, dispatch] = useReducer(switchReducer, initialState);

  const toggleStyle = () => {
    dispatch({ type: "toggle" });
    console.log(state.isActive);
  };

  return (
    <button
      onClick={toggleStyle}
      style={{
        backgroundColor: state.isActive ? "blue" : "gray",
        color: "white",
      }}
    >
      按钮 {state.isActive ? "Active" : "Inactive"}
    </button>
  );
};

export default ToggleStyleButton;
